<template>
	<zkView ref="zkView" v-slot:uContainer>
		<view class="container">
			<view class="card">
				<view class="item">
					<view class="left">
						<text>头像</text>
					</view>
					<view class="right">
						<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image v-if="avatarUrl" mode="aspectFill" :src="avatarUrl"></image>
							<image v-else mode="aspectFill"
								src="https://env-00jxgsqva4xd.normal.cloudstatic.cn/user_avatar/avatar.png"></image>
						</button>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text>昵称</text>
					</view>
					<view class="right">
						<input type="nickname" placeholder="请输入昵称" :value="nickname" @input="getNickname" />
					</view>
				</view>
			</view>
			<view class="card">
				<view class="item">
					<view class="left">
						<text>生日</text>
					</view>
					<view class="right">
						<picker mode="date" :value="birthday" @change="bindDateChange">
							<view class="uni-input" v-if="birthday">{{birthday}}</view>
							<view class="uni-input" v-else style="color: #666;">请选择生日</view>
						</picker>
						<image mode="aspectFill" src="/static/mine/arrow_right.png"></image>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text>性别</text>
					</view>
					<view class="right">
						<picker :range="genderArr" @change="bindGenderChange">
							<view class="uni-input" v-if="gender==='0'||gender==='1'">{{genderArr[gender]}}</view>
							<view class="uni-input" v-else style="color: #666;">请选择性别</view>
						</picker>
						<image mode="aspectFill" src="/static/mine/arrow_right.png"></image>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text>地区</text>
					</view>
					<view class="right">
						<picker mode="region" @change="bindRegionChange">
							<view class="uni-input" v-if="region&&region.length>0">{{region.join('')}}</view>
							<view class="uni-input" v-else style="color: #666;">请选择地区</view>
						</picker>
						<image mode="aspectFill" src="/static/mine/arrow_right.png"></image>
					</view>
				</view>
			</view>
			<button size="default" type="default" class="btnDefault" hover-class="btnHover" @click="saveUserInfo">保 存</button>
		</view>
	</zkView>
</template>

<script>
	import indexJs from './index.js';
	export default {
		components: {},
		computed: {
			Phone() {
				return (phone) => phone.substring(0, 3) + ' **** ' + phone.substring(phone.length - 4);
			},
			Wechat() {
				return (wechat) => wechat.substring(0, 3) + '***';
			},
		},
		...indexJs
	};
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>